<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.outer {
			width: 1000px;
			height: 100px;
			border: 1px solid black;
		}

		/* @keyframes wangyoudong {
			from {
				
			}

			to {
				transform: translate(900px) rotateZ(360deg);
				background-color: yellow;
				border-radius: 90px;
			}
		}

		@keyframes wangyoudong2 {
			0% {

			}

			30% {
				background-color: blue;
			}

			100% {
				transform: translate(900px) rotateZ(360deg);
				background-color: yellow;
				border-radius: 90px;
			}
		} */


		.inner {
			width: 100px;
			height: 100%;
			background-color: skyblue;
			/* 使用哪一个动画 */
			/* animation-name: wangyoudong2; */
			/* 动画持续时间 */
			/* animation-duration: 3s; */
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner"></div>
	</div>
</body>
</html>